<template>
  <div class="flex-main">
    <div class="flex-body">
      <div class="over">
        <div class="m-header"></div>
        <div class="m-mineheader">
          <img src="@/assets/images/p_02.jpg" alt="" class='m-mineheadimg'>
          <div>
            <h4>{{username}}</h4>
            <span>
              <img src="@/assets/images/flower@2x.png" alt="">
              花瓣 {{Reward}}
              &nbsp;&nbsp;&nbsp;
              <img src="@/assets/images/jifen@2x.png" alt="">
              积分 {{Integral}}
            </span>
          </div>
        </div>
      </div>
      <ul class="m-form">
        <li class="m-form-item">
          <span class="m-form-tit">姓名</span>
          <input v-model="username" type="text" name="" id="" class="m-form-ipt" placeholder="姓名">
        </li>
        <li class="m-form-item">
          <span class="m-form-tit">生日</span>
          <input @click="openPicker()" v-model="birthday" type="text" name="" id="" class="m-form-ipt" placeholder="生日">
        </li>
        <li class="m-form-item">
          <span class="m-form-tit">身份证</span>
          <input v-model="IDcard" type="text" name="" id="" class="m-form-ipt" placeholder="身份证">
        </li>
        <li class="m-form-item">
          <span class="m-form-tit">邮箱</span>
          <input v-model="Email" type="text" name="" id="" class="m-form-ipt" placeholder="邮箱">
        </li>
        <li class="m-form-item" @click="choosePCA">
          <span class="m-form-tit">省市区</span>
          <div class="m-form-ipt">
            {{province || '省'}} {{city || '市'}} {{area || '区'}}
          </div>
        </li>
        <li class="m-form-item">
          <span class="m-form-tit">地址</span>
          <input v-model="address" type="text" name="" id="" class="m-form-ipt" placeholder="地址">
        </li>
        <li class="m-form-item">
          <span class="m-form-tit">银行</span>
          <input v-model="bank" type="text" @click="isShow = true" name="" id="" class="m-form-ipt" placeholder="银行">
        </li>
        <li class="m-form-item">
          <span class="m-form-tit">账号</span>
          <input v-model="account" type="text" name="" id="" class="m-form-ipt" placeholder="账号">
        </li>
      </ul>
    </div>
    <div class="flex-bottom">
      <div class="m-bottom-btn">
        <button @click="save()">保存</button>
      </div>
    </div>
    <!-- 选择银行卡 -->
    <mt-popup v-model="isShow" position="bottom">
      <picker-bank-card @pickerChange="pickerBank"></picker-bank-card>
    </mt-popup>
    <mt-datetime-picker type="date" ref="picker" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
      @confirm="handleConfirm" :startDate="startTime">
    </mt-datetime-picker>
    <mt-popup v-model="popupVisible" position="bottom" class="pickerWidth">
      <picker-province-city-area @pickerChange="pickerChange"></picker-province-city-area>
    </mt-popup>
  </div>
</template>
<script>
  import {
    provinceList
  } from "@/utils/area.js";
  import {
    DatetimePicker,
    Toast,
    Popup,
    Picker,
    Indicator
  } from 'mint-ui'; //- mint-ui插件
  import {
    getCustomerData,
    getCustomDetail,
    changeCustomDetail,
  } from "@/api/mine.js";
  export default {
    name: '',
    data() {
      return {
        startTime: new Date('1900-1-1'),
        isShow: false, //银行选择器的显示与影藏
        popupVisible: false,
        province: '', //省
        city: '', //市
        area: '', //区
        username: '用户名',
        Reward: 0,
        Integral: 0,
        CustomerID: this.$utils.uid, //用户id
        birthday: '',
        IDcard: '',
        Email: '',
        address: '', //地址
        bank: '', //银行
        account: '', //银行卡号
      }
    },
    components: {
      pickerProvinceCityArea: () => import('@/components/pickerProvinceCityArea'),
      pickerBankCard: () => import('@/components/pickerBankCard'),
    },
    methods: {
      // 显示省市区
      choosePCA() {
        this.popupVisible = true;
        if (this.province == '') {
          this.province = provinceList[0].name;
          this.city = provinceList[0].cityList[0].name;
          this.area = provinceList[0].cityList[0].areaList[0];
        }
      },
      // 选择省市区
      pickerChange(data) {
        console.log(this.popupVisible);
        if (this.popupVisible) {
          this.province = data[0].name;
          this.city = data[1].name;
          this.area = data[2];
        }

      },

      //获取用户名和花瓣数量
      CustomerData(data) {
        getCustomerData(data).then((result) => {
          this.username = result.detail.nickname;
          this.Reward = result.detail.Reward;
          this.Integral = result.detail.Integral;
        }).catch((err) => {

        });
      },
      //获取用户的详情
      CustomerDetail(data) {
        getCustomDetail(data).then((result) => {
          this.birthday = result.detail.BirthDate.substr(0, 10);
          this.IDcard = result.detail.IDCard;
          this.Email = result.detail.QQ;
          this.address = result.detail.Address;
          this.bank = result.detail.BankName;
          this.account = result.detail.BankAccount;
          this.province = result.detail.Province;
          this.city = result.detail.City;
          this.area = result.detail.Area;
        }).catch((err) => {

        });
      },
      //选择生日日期
      openPicker() {
        this.$refs.picker.open()
      },
      //- 获取的时间为时间戳
      getDate(data) {
        return this.birthday = new Date(data).getFullYear() + '-' + (new Date(data).getMonth() + 1) + '-' + new Date(
          data).getDate();
      },
      //- 时间选择点击确定
      handleConfirm(data) {
        console.log(data);
        this.birthday = this.getDate(data);
        console.log(this.birthday)
      },
      //选择银行
      pickerBank(e) {
        this.bank = e.backName
      },

      //点击保存
      save() {
        let that = this;
        var param = {
          customer_id: this.CustomerID,
          Name: this.username,
          BirthDate: this.birthday,
          IDCard: this.IDCard,
          QQ: this.Email,
          Province: this.province,
          City: this.city,
          Area: this.area,
          Address: this.address,
          BankName: this.bank,
          BankAccount: this.account,
        }
        console.log(param)
        changeCustomDetail(param).then((result) => {
          Toast('修改成功');
          setTimeout(() => {
            that.$router.go(-1);
          }, 300);
          
        }).catch((err) => {

        });
      }
    },
    mounted() {
      var data = {
        customer_id: this.CustomerID
      }
      this.CustomerData(data);
      this.CustomerDetail(data);
      console.log(this.startTime)
    },
  }

</script>
<style lang="less" scoped src="@/less/mine/infoEdit.less"></style>
